<template>
  <div>
    <div style="height: 40px;display: flex;margin-bottom: 10px;align-items: center">

        <el-input
          clearable
          style="padding-left: 10px;padding-right: 10px;box-sizing: border-box;width: 200px"
          placeholder="商户名称"
          v-model="keyword"
        ></el-input>

      <div>
        <el-button style="margin-left: 10px" icon="el-icon-search" type="primary"
                   @click="loadSysmch">查询
        </el-button>
      </div>
    </div>
    <el-table
      :data="mchIdOptions"
      border
      stripe
      ref="table"
      height="300px"
      @row-dblclick="doubleClick"
      style="width: 100%;margin-top: 20px;margin-bottom: 20px">
      <el-table-column
        label="商户名称"
        width="150"
        align="center"
        prop="name"
      >
      </el-table-column>
      <el-table-column
        label="联系手机"
        align="left"
        width="150"
        prop="telephone">
      </el-table-column>
      <el-table-column
        label="地址"
        align="center"
      >
        <template slot-scope="scope">
            <span>
              {{ scope.row.areaName }}{{ scope.row.address }}
            </span>
        </template>
      </el-table-column>
    </el-table>
    <pagination :total="total" :page.sync="pageNum" :limit.sync="pageSize"
                @pagination="loadSysmch"></pagination>
  </div>


</template>

<script>
  import Pagination from '@/components/Pagination'
  import { mchList } from '@/api/shop'

  export default {
    data() {
      return {
        mchIdOptions: [],
        total: 0,
        pageSize: 20,
        pageNum: 1,
        keyword: ''
      }
    },
    created() {
      this.loadSysmch()
    },
    components: {
      Pagination
    },
    methods: {
      loadSysmch() {
        let params = new URLSearchParams()
        params.append('name', this.keyword)
        params.append('pageSize', this.pageSize)
        params.append('pageNum', this.pageNum)
        mchList(params).then(res => {
          this.mchIdOptions = res.data.data
          this.total = res.data.total
        }).catch(err => {
          console.log(err)
        })
      },
      //双击添加商品
      doubleClick(val) {
        this.$emit('mchDouble', val)
      },
    }
  }
</script>

<style scoped>
  /deep/.el-dialog__body{
    padding: 0 !important;
  }
</style>
